import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { Layout, Table, Input, Button, InputNumber, Popconfirm } from 'antd';

import CreateApi from './components/createApi';
import EditApi from './components/editApi';

import './style.scss';

const { Content } = Layout;
const { Column } = Table;

@withRouter
class apiManagement extends Component{
  state={
    page: 10,
    searchValue: '',
  };

  changePage = (value) => {
    this.setState({page:value});
  }
  
  setSearchValue = (e) => {
    this.setState({searchValue: e.target.value})
  }

  handleSearch = () => {
    let userName = "admin";//待修改
    this.props.searchApi(userName,this.state.searchValue)
  }

  resetSearch = () => {
    this.setState({searchValue:''});
    let userName = "admin";//待修改
    this.props.getConfig(userName);
  }

  deleteCon = (record) => {
    let databaseConfig = JSON.parse(record.userDatabaseConfig);
    let params = {databaseId: databaseConfig.databaseId,id: databaseConfig.id};
    this.props.deleteCon(params);
  }

  componentDidMount(){
    let userName = "admin";//待修改
    this.props.getConfig(userName);
  };

  render(){
    const { page } = this.state;
    return (
      <Content style={{marginTop:12}}>
        <div>
          <div style={{display: 'inline-block', fontWeight: 'bold'}}>数据源接口列表</div>
          <div style={{float: 'right', display: 'inline-block', height:'100%'}}>
            <span>关键字: <Input placeholder="请输入接口名" style={{width: 200}} onChange={this.setSearchValue} value={this.state.searchValue}/></span>
            <Button type="primary" style={{marginLeft: 12}} onClick={this.handleSearch}>搜索</Button>
            <Button type="primary" style={{marginLeft: 12}} onClick={this.resetSearch}>重置</Button>
            <CreateApi searchValue={this.state.searchValue}/>
          </div>
        </div>
        <div className="table-box" style={{marginTop:24}}>
          <Table 
          pagination={{pageSize:page,showSizeChanger:false}}
          dataSource={this.props.webApi}>
            <Column title="序号" render={(text, record, index)=><span>{index+1}</span>}/>
            <Column title="接口名称"
            render={(text,record)=>(
              <span>{JSON.parse(record.userDatabaseConfig).configName}</span>)}/>
            <Column title="请求方式" dataIndex="method" key="method"/>
            <Column title="返回类型"
            render={(text,record)=>(
              <span>JSON</span>)}/>
            <Column title="接口地址" dataIndex="url" key="url"/>
            {/* <Column title="用户名" dataIndex="username" key="username"/>
            <Column title="归属部门" dataIndex="" key=""/> */}
            {/* <Column title="创建时间" dataIndex="" key=""/> */}
            <Column title="操作" dataIndex="operation" key="operation"
            render={(text,record)=>(
              <span>
                <span className="action" onClick={e=>{e.stopPropagation();this.editApi.handleClick(JSON.parse(record.userDatabaseConfig).id);}}>编辑</span>
                <EditApi onRef={ref=>this.editApi=ref} searchValue={this.state.searchValue}/>
                <Popconfirm
                title="确认删除?"
                onConfirm={() => this.deleteCon(record)}
                >
                  <span className="action">删除</span>
                </Popconfirm>
              </span>)}/>
          </Table>
          <div className={this.props.webApi.length>0?'footer':'withoutPagination'}>
            显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{this.props.webApi.length}项
          </div>
        </div>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    webApi: state.getIn(['api','webApi']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getConfig(userName){
    dispatch(actionCreators.getAllConfigOperation(userName));
  },
  searchApi(value){
    dispatch(actionCreators.searchConfigOperation(value));
  },
  deleteCon(params){
    dispatch(actionCreators.deleteConOperation(params));
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(apiManagement);